<template>
	<view class="margin-top-sm" style="padding-right:10upx;padding-bottom: 160upx;background-color: #fff;">
		<view class="text-xl text-orange padding-lr padding-top">课程推荐</view>
		
		<!-- 卡片 --> 
		<view v-for="(item,index) in courses" :key="item.id" class="cu-card article no-card" 
		>
			<view class="cu-item shadow padding-top solid-bottom" style="padding-bottom: 20upx;">
				<view class="content">
					<image :src="item.image==null||item.image==''?'/static/image/errorImg.svg':item.image" :lazy-load="true"
					 mode="aspectFill" style="min-width: 268upx;height: 200upx;" :id="index" @error="imgError"></image>	
					
					<view class="desc">
						<view class="flex align-center">
							<view class="padding-right-sm text-xl text-cut" style="max-width: 400upx;">{{item.course_name}}</view>
						</view>
						<view>
							<text>{{!item.teacher.teacher_name?'未知姓名':item.teacher.teacher_name}}</text>
							<text v-if="item.teacher.level">.{{item.teacher.level}}</text>
							<text v-else></text>
						</view>
						<view class="text-sm two-omit" style="color:#666;" v-text="item.description==null?'暂无描述':item.description"></view>
						<view class="flex align-center justify-between">
							<my-tag :tag="item.tag"></my-tag>
							<view class="text-right text-price text-red" style="font-size:40upx;">{{item.unit_price}}</view>
						</view>
					</view>
				</view>
				<view class="flex justify-between" style="padding: 20upx 100upx 0;">
					<button class="cu-btn bg-orange" style="min-height:60upx;min-width:180upx;" :open-type="getPhoneNumber" 
					@getphonenumber="wxGetPhonenNumber" @tap="toApply(item.id, item.is_activity)">立即预约</button>
					<button class="cu-btn" style="min-height:60upx;min-width:180upx;border:2upx solid #D8B36B;background-color:#fff;color:#D8B36B;" 
					:open-type="getPhoneNumber" @getphonenumber="wxGetPhonenNumber" @tap="toBuy(item.id)">立即购买</button>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import myTag from '@/components/my-tag.vue';	//自定义标签组件
	export default {
		components: {
			myTag,
		},
		data() {
			return {
				
			};
		},
		props: {
			courses: {
				type: Array,
				default: () => []
			},
			getPhoneNumber: {
				type: String,
				default: ''
			}
		},
		methods: {
			// 图片加载失败
			imgError: function (e) {
				let errorImgIndex = e.currentTarget.id
				this.courses[errorImgIndex].image = '/static/image/errorImg.svg'
			},
			toApply(id, is_activity){
				if(is_activity == 0){
					uni.showToast({
						title: '该课程暂时无法预约',
						icon: 'none',
						mask: true
					})
				}else{
					uni.$emit('applyEmit', {courseId: id})
				}
			},
			toBuy(id){ 
				uni.$emit('buyEmit', {courseId: id})
			}
		}
	}
</script>

<style lang="scss">
	page{
	}
</style>
